import React from 'react'
import '../css/Unfinished.css'
import eventEmitter from '../event'

class Completed extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			message: [],
		}
	}

	componentDidMount() {
		eventEmitter.addListener('Completed', (item) => {
      // console.log(item)
      this.state.message.push(item)
      this.setState({
        message:this.state.message
    })
		})
	}

	render() {
		return (
			<div className="Unfinished">
				<div className="w">
					<h2>
						已完成 <span className="num">{this.state.message.length}</span>
					</h2>
					<ul className="uu">
            {
              this.state.message.map((item,index)=>{
                return 	<li key={index}>
                <input type="checkbox" checked onChange={()=>{
                  eventEmitter.emit('sendheaders',item)
                  this.state.message.splice(index,1)
                  this.setState({
                    message: this.state.message
                  })
                }}/>
              <div>{item.content}</div> <span className="del"
              onClick={
                ()=>{
                    this.state.message.splice(index,1)
                    this.setState({
                        message:this.state.message
                    })
                }
            }
              >一</span>
              </li>
              })
            }
					
					</ul>
				</div>
			</div>
		)
	}
}

export default Completed
